﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>博客主页</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>

    <!--<script src="js/jquery-1.11.1.min.js"></script>-->
    <!-- 自定义的CSS文件 -->

    <link rel="stylesheet" type="text/css" href="css/blog-content.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_816075_hqimkkj5594.css">
</head>
<body>
<!--<div class="of-header">-->
    <!--<div class="of-logo">-->
    <!--<img src="images/logo.png" alt="">-->
    <!--</div>-->
    <!--<div class="nav">-->
        <!--<div class="of-square">-->
            <!--<p><span class="iconfont icon-wode"></span>&nbsp;广场</p>-->
        <!--</div>-->
        <!--<div class="of-search">-->
            <!--<input type="text" name="" id="">-->
            <!--<button type="submit" class="iconfont icon-sousuo"></button>-->
        <!--</div>-->
        <!--<div class="of-write">-->

            <!--<p><span class="iconfont icon-bianji"></span>&nbsp;写博客</p>-->
        <!--</div>-->
        <!--<div class="of-headPhoto">-->
        <!--</div>-->
        <!--<div class="of-message">-->
            <!--<span class="iconfont icon-xiaoxi"></span>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
            <span class="sr-only">展开导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="images/logo.png" alt="" style="width: 20px;height: 20px"></a>
    </div>
    <div class="collapse navbar-collapse of-menu" id="menu">
        <ul class="nav navbar-nav of-flex">
            <li class="active">
                <a href="#"><span class="iconfont icon-wode"></span>&nbsp;广场</a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-xiaoxi">&nbsp;消息</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-bianji"></span>&nbsp;写博客
                </a>
            </li>
            <li class="of-search">
                <a href="#" class="of-search1">
                    <input type="text" name="" id="">
                    <button type="submit" class="iconfont icon-sousuo"></button>
                </a>
            </li>
            <li>
                <a href="#" class="of-headPhoto">
                    <div><img src="images/headPhoto.jpg" alt="" style="border-radius: 50%"></div>
                </a>
            </li>
            <!--<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>-->
                <!--<ul class="dropdown-menu">-->
                    <!--<li><a href="#">下拉菜单1</a></li>-->
                    <!--<li class="divider"></li>-->
                    <!--<li><a href="#">下拉菜单2</a></li>-->
                    <!--<li class="divider"></li>-->
                <!--</ul>-->
            <!--</li>-->
        </ul>
    </div>
</nav>
<br>
<div class="container">
    <div class="row">
        <div class="of-littleHeader">
            <p>python进阶之路</p>
            <label for="">原创</label>
            <br>
            <p>2018-9-10</p>
            <label for="">python</label>
            <label for="">编程语言</label>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 clearfix">
            <div class="of-individual clearfix">
                <div class="of-headPhoto1">
                </div>
                <div class="of-personal">
                    <p>Xstar.</p>
                    <label for="">+关注</label>
                    <br>
                    <p>个性签名</p>
                </div>
            </div>
        </div>
        <div class="of-position">
            <a href="#">
                <div class="of-page-top">
                    <i class="iconfont icon-xiangzuo"></i>
                </div>
            </a>
            <a href="#">
                <div class="of-page-bottom">
                    <i class="iconfont icon-goLeft"></i>
                </div>
            </a>
            <div class="of-pings">
                <div class="of-comment">
                    <span class="iconfont icon-pinglun" id="of-comment">0</span>
                </div>
            </div>
            <div class="of-reply">
                <div class="of-comment">
                    <span class="iconfont icon-edit of-second-comment" id="replys"></span>
                </div>
            </div>
            <div class="of-scroll-top">
                <div class="of-comment">
                    <span class="iconfont icon-dingbu of-second-comment" id="top"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="of-blog-title">
            <h3>我喜欢啊!!你是我的最爱</h3>
            <span class="of-tint">置顶</span>&nbsp;&nbsp;
            <span class="of-tint">2018-9-10  13:14:52</span>&nbsp;&nbsp;
            <a href="#">Xstar.</a>&nbsp;&nbsp;
            <span class="of-tint">阅读数:1313</span>&nbsp;&nbsp;
            <label for="">标签:</label>&nbsp;&nbsp;
            <a href="#"><span class="of-label">喜欢</span></a>
            <a href="#"><span class="of-label">我的最爱</span></a>
        </div>
        <div class="of-statement">
            <hr>
            <span class="of-tint of-little">版权声明：本文为博主原创文章，未经博主允许不得转载。	https://blog.csdn.net/singwhatiwanna/article/details/48439621</span>
        </div>
        <div class="of-blog-content">
            <h3>第一章</h3>
            <div class="of-blog-content1">
                <ol>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                    <li>
                        <p>
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                            你是我这辈子最喜欢的水电费暗示法阿斯蒂芬干昂阿斯蒂芬干阿斯蒂芬干阿萨德股份阿斯蒂芬干阿萨德刚昂达上个阿萨德刚昂达按时嘎嘎阿萨德噶十多个个昂
                        </p>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <!--<div class="row">-->
        <!--<div class="of-comment">-->
            <!--<span class="iconfont icon-pinglun" id="of-comment">0</span>&nbsp;&nbsp;-->
            <!--<span class="iconfont icon-edit of-second-comment" id="replys"></span>-->
        <!--</div>-->
    <!--</div>-->

    <!--一级评论输入框-->
    <div class="row" id="of-comment2">
        <div class="col-lg-12">
            <div class="input-group" id="input-group1">
                <input type="text" class="form-control" placeholder="我来说两句" id="ping">
                <span class="input-group-btn">
                   <button class="btn btn-default of-publish" type="button" id="publish">发表</button>
                </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div>
    <div class="row">

    </div>
    <!--评论的内容-->
    <div class="row" id="of-comment1">
        <div class="col-lg-12" id="of-comments">
            <!--一级评论的克隆标签-->
            <div class="of-comment1 clearfix" id="of-comment11">
                <!--头像-->
                <div class="of-individual clearfix">
                    <div class="of-headPhoto1">
                    </div>
                    <div class="of-personal">
                        <p>Xstar.</p>
                        <label for="" class="rank">lv6</label>
                        <br>
                        <p class="time">2小时前</p>
                    </div>
                </div>
                <div class="praise">
                    <span class="iconfont icon-zan2" id="zan">0</span>&nbsp;&nbsp;
                    <span class="iconfont icon-pinglun of-second-comment" id="of-comment3">0</span>&nbsp;&nbsp;
                    <span class="iconfont icon-huifu of-second-comment" id="reply"></span>
                </div>
                <div class="content" id="content">
                    <p class="p1">的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊</p>
                    <!--二级评论输入框-->
                    <div class="input-group" id="input-group">
                        <input type="text" class="form-control" placeholder="我来说两句" id="ping1">
                        <span class="input-group-btn">
                             <button class="btn btn-default of-publish" type="button" id="publish1">发表</button>
                        </span>
                    </div><!-- /input-group -->

                    <div class="content1 clearfix" id="content1">
                        <div class="of-individual clearfix">
                            <div class="of-headPhoto1">
                            </div>
                            <div class="of-personal">
                                <p>Xstar.</p>
                                <label for="" class="rank">lv6</label>
                                <br>
                                <p class="time">2小时前</p>
                            </div>
                        </div>
                        <div class="content">
                            <p class="p2">你是我的眼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦阿纲啊我是最牛逼的的啊哦</p>
                        </div>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(function () {

//        加载完成
        window.onload=function () {
            $("#input-group").hide();
            $("#of-comment2").hide();
        };

//        $("#of-header").load("nav.html");


//        评论栏的显示与隐藏
        $("#of-comment").click(function () {
            $("#of-comment1").toggle();
            $("html,body").animate({scrollTop:$(document).height() - $(window).height()},"1s");
        });
//        二级评论栏的显示与隐藏
        $("#of-comment3").click(function () {
          $(this).parent().next().children(".content1").toggle();
        });

//        一级评论输入框的显示与隐藏
        $("#replys").click(function () {
            $("#of-comment2").toggle();
//            自动滚动到评论框的位置(底部)
            $("html,body").animate({scrollTop:$(document).height() - $(window).height()},"1s");
        });
        $("#top").click(function () {
            $("html,body").animate({scrollTop:0},"1s");
        });
//        $(window).scroll(function () {
//            var src = $(window).scrollTop();
//            console.log(src);
//            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
//                alert("滚动条已经到达底部为" + $(document).scrollTop());
//            }
//        });

//        点赞
        $("#zan").click(function () {
            $(this).css({
                "color": "red"
            });
                $(this).text(parseInt($(this).text()) + 1);
            //当按加1时，解除$("#min")不可读状态
//            $(this).attr("disabled", true)
//            setTotal();
        });


//        var parent =  $(".content").get(0);
//        parent.append($(".content1"));

//                点击发表一级评论
        $("#publish").click(function () {
            //test--0
            console.log("yiji");
            //test--1
            var $copyer   =  $("#of-comment11").clone(true);
            console.log($copyer);
//            获取发表的文本框内容
            var text = $("#ping").val();
//          console.log(text);
            $copyer.find("p.p1").text(text);
//          删除二级评论
          $copyer.find(".content1").remove();
//          清空数据
            $copyer.find("#of-comment3").text("0");
            $copyer.find(".of-headPhoto1").css({
                "background-image": "url('images/user2.jpg')"
            });
//            一级评论框隐藏
            $("#of-comment2").hide();
//            一级评论栏显示
            $("#of-comment1").show();
//            一级评论的数量
            $("#of-comment").text(parseInt($("#of-comment").text())+1);
            $copyer.appendTo("#of-comments");
        });

//        点击二级评论出现文本框
//        var $copyer3 = $("#input-group").clone(true);
        $("#reply").click(function () {


            $(this).parent().next().children("#input-group").toggle();
//            $copyer3.appendTo()


        });

        //            点击二级评论发表
        $(".container .row .content .of-publish").click(function () {
            var $copyer2 = $("#content1").clone(true);
//            获取二级评论发表的文本框内容
            var text2 = $(this).parent().prev().val();
            console.log("text2"+text2);
            $copyer2.find("p.p2").text(text2);
            $(this).parent().parent().hide();
//            二级评论数量
            $(this).parent().parent().parent().prev().find("#of-comment3").text(parseInt($(this).parent().parent().parent().prev().find("#of-comment3").text())+1);
            $copyer2.appendTo($(this).parent().parent().parent());
        });

//        回车发表一级评论
        $("#input-group1").keydown(function() {
            if (event.keyCode == "13") {//keyCode=13是回车键
                $("#publish").click();
            }
        });

//        回车发表二级评论 但存在bug
//        $("#input-group").keydown(function() {
//            if (event.keyCode == "13") {//keyCode=13是回车键
//                $(".container .row .content .of-publish").click();
//            }
//        })
//        上一篇

        $(".container .row .of-position .of-page-top").mouseenter(function () {
            $(this).text("上一篇")
        });
        $(".container .row .of-position .of-page-top").mouseleave(function () {
            $(this).html("<i class=\"iconfont icon-xiangzuo\"></i>")
        });
        $(".container .row .of-position .of-page-bottom").mouseenter(function () {
            $(this).text("下一篇")
        });
        $(".container .row .of-position .of-page-bottom").mouseleave(function () {
            $(this).html("<i class=\"iconfont icon-goLeft\"></i>")
        });
//
//        $(".container .row .of-position .of-pings").mouseenter(function () {
//            $(this).text("展开").css({
//                "color":"#337ab7"
//            })
//        });
//        $(".container .row .of-position .of-pings").mouseleave(function () {
//            $(this).html("<i class=\"iconfont icon-pinglun\"></i>")
//        });
//
//        $(".container .row .of-position .of-reply").mouseenter(function () {
//            $(this).text("编辑").css({
//                "color":"#337ab7"
//            })
//        });
//        $(".container .row .of-position .of-reply").mouseleave(function () {
//            $(this).html("<i class=\"iconfont icon-edit\"></i>")
//        });
//
//        $(".container .row .of-position .of-scroll-top").mouseenter(function () {
//            $(this).text("回顶部").css({
//                "color":"#337ab7"
//            })
//        });
//        $(".container .row .of-position .of-scroll-top").mouseleave(function () {
//            $(this).html("<i class=\"iconfont icon-dingbu\"></i>")
//        });
    })


</script>